<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .leftTiyle {
      font-size: 25px;
      padding-left: 30px;
      font-weight: 600;
      color: #545454;
      float: left;
    }
    .top {
      width: 100%;
      float: left;
      height: 100px;
      line-height: 100px;
      border-bottom: 1px solid #b0cdff;
    }
    .thisUser {
      float: right;
      margin-right: 30px;
    }
    .content {
      float: right;
      width: 100%;
      text-align: center;
      font-size: 40px;
      margin-top: 200px;
    }
    #demo4{
      text-align: center;
    }

    /* 搜索框 */
    .search{
      width: 40%;
      margin: 0 auto;
      display: flex;
      /*border: 1px solid red;*/
    }
    .search input{
      float: left;
      flex: 4;
      height: 30px;
      outline: none;
      border: 1px solid red;
      box-sizing: border-box;
      padding-left: 10px;
    }
    .search button{
      float: right;
      flex: 1;
      height: 30px;
      background-color: red;
      color: white;
      border-style: none;
      outline: none;
    }
    .search button i{
      font-style: normal;
    }
    .search button:hover{
      font-size: 16px;
    }
    .box { margin:20px 0;
      position: absolute;
      left: 650px;
      top: 600px;

    }
    .box a{
      padding: 5px;
      border: 1px solid blue;
      margin:3px;
      text-decoration: none;
      border-radius: 5px;

    }
    .box a.high {
      background-color: #007DDB;
    }
    #sx{
      position: absolute;
      right: 50px;
      top: 600px;
    }
  </style>
  <script th:src="@{/js/jquery.min.js}"></script>
  <script th:src="@{/js/layui/layui.js}"></script>
  <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
</head>
<body>
<div class="top">
  <div class="leftTiyle" id="flTitle" style="color: gray">订单管理</div>
  <div class="thisUser"></div>
</div>

<hr style="background-color: white;">
<div class="search">
  <input type="text" placeholder="请输入" name="" id="" value="" class="fwfew" />
  <button class="searchbt"><i class="layui-icon layui-icon-search"></i></button>
</div>

<table class="layui-table">
  <thead>
  <tr>
    <th>订单ID</th>
    <th>地址ID</th>
    <th>用户ID</th>
    <th>商品名称</th>
    <th>商品数量</th>
    <th>商品图片</th>
    <th>订单号</th>
    <th>实际付款金额</th>
    <th>支付类型</th>
    <th>订单状态</th>
    <th>发货时间</th>
    <th>订单创建时间</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody class="rnver">
  <tr th:each="obj : ${info.list}">
    <td th:text="${obj.id}"></td>
    <td th:text="${obj.addressid}"></td>
    <td th:text="${obj.userid}"></td>
    <td th:text="${obj.productGoods}"></td>
    <td th:text="${obj.quantity}"></td>
    <td><img th:src="'/img/JiXeiShu/'+${obj.pictureImg}" style="width: 50px; height: 50px"></td>
    <td th:text="${obj.orderno}"></td>
    <td th:text="${obj.payment+'(元)'}"></td>
    <td th:text="${obj.paymenttype}"></td>
    <td th:text="${obj.taostatus}"></td>
    <td th:text="${#dates.format(obj.sendtime,'yyyy-MM-dd')}"></td>
    <td th:text="${#dates.format(obj.createtime,'yyyy-MM-dd')}"></td>
<!--    <td><i class="layui-icon layui-icon-fire">&#xe65e;</i> 3000</td>-->
    <td><div class="layui-btn-group">
      <i class="btn2" th:value="${obj.id}" id="sc" name="spsc" value="">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
          <i class="layui-icon">&#xe640;</i>
        </button>
      </i>
    </div>
    </td>
  </tr>
  </tbody>
</table>
<div class="box">
  <a href="1" th:value="1">首页</a>
  <a th:class="${ p==info.pageNum ? 'high' : ''}"
     th:each="p : ${info.navigatepageNums}"
     th:href="${p}"
     th:text="${p}" th:value="${p}">1</a>
  <a th:href="${info.pages}" th:value="${info.pages}">尾页</a>
</div>
<input type=button value="刷新" onclick="location.reload()" class="layui-btn layui-btn-sm" id="sx">
<div id="demo7"></div>
<fieldset class="layui-elem-field" id="ew">
  <legend>起床了</legend>
  <div class="layui-field-box">
    I'm back in charge of orders
  </div>
</fieldset>


</body>
<script>
  //订单删除
  $(function (){
    $("tbody").on('click','.btn2',function(){
      // $(".btn2").click(function (){
          var sc=$(this).attr("value");
          // alert(sc);
          var data = {"id": sc};
        $.ajax({
          url: "/ddsc",
          type: "post",
          contentType:'application/json',
          data:JSON.stringify(data),
          success: function (obj) {
            if (obj == 1) {
              alert("删除成功");
            } else if (obj==0) {
              alert("删除失败")
            }
          }
        });

      })
  })

  //根据订单状态查询
  $(function (){
    // $("body").on('click','.searchbt',function(){
    $(".searchbt").click(function (){
      var zt=$(".fwfew").val();
        // alert(zt);
      var data = {"taostatus": zt};
      $.ajax({
        url: "/ddztcx",
        type: "post",
        contentType:'application/json',
        data:JSON.stringify(data),
        success : function(obj) {
          $(".rnver").empty();
          console.log(obj.data);
          for(var i = 0; i < obj.data.length; i++) {
            var bj =("<tr>"+"<td>"+ obj.data[i].id  + "</td>"+
                    "<td>"+obj.data[i].addressid  +"</td>"+
                    "<td>"+obj.data[i].userid  +"</td>"+
                    "<td>"+obj.data[i].productGoods  +"</td>"+
                    "<td>"+obj.data[i].quantity+"</td>"+
                    "<td>"+"<img style='width: 50px; height: 50px' src=/img/"+obj.data[i].pictureImg+"/>"  +"</td>"+
                    "<td>"+obj.data[i].orderno+"</td>"+
                    "<td>"+obj.data[i].payment+"(元)" +"</td>"+
                    "<td>"+obj.data[i].paymenttype+"</td>"+
                    "<td>"+obj.data[i].taostatus +"</td>"+
                    "<td>"+obj.data[i].sendtime+"</td>"+
                    "<td>"+obj.data[i].createtime +"</td>"+
                    "<td>"+"<div class=\"layui-btn-group\">\n" +
                    "                <i class=\"btn2\" value='"+obj.data[i].id+"'>\n" +
                    "                   <button class=\"layui-btn layui-btn-primary layui-btn-sm\" type=\"button\">\n" +
                    "                    <i class=\"layui-icon\">&#xe640;</i>\n" +
                    "                   </button>\n" +
                    "                </i>\n" +
                    "            </div>"+"</td>"+"</tr>");

            // var t=$(".btn2").attr("value",obj.data[i].id);
            $(".rnver").append(bj);
            // $(".btn2").append(t);
          }
        },
        "error": function() {
          alert("查询失败....")
        }
      });
    })//
  })





</script>

</html>